<template>
    <div class="web-woker">
        <a-space :size="10">
            <a-button type="primary" @click="sendMsgToWebWoker">sendMsgToWebWoker</a-button>
            <a-button @click="test">testApi</a-button>
        </a-space>
    </div>
</template>

<script setup lang="ts">
import { testApi } from '@/api/test.ts'
const test = async () => {
    try {
        const res = await testApi({ query: 'abc' })
        console.log({ res })
    } catch (error) {
        console.error({ error })
    }
}

// 创建一个新的 Worker 实例  woker.ts:目前放在public文件夹下
const myWorker = new Worker('woker.ts');

// 监听来自 Worker 的消息
myWorker.onmessage = function (event) {
    console.log('Result received from worker:', event.data);
};

// 错误处理
myWorker.onerror = function (error) {
    console.error('Error in worker:', error.message);
};

// 向 Worker 发送数据
const sendMsgToWebWoker = () => {
    myWorker.postMessage(10)
}
</script>

<style lang="scss" scoped>
.web-woker {
    font-size: 16px;
}
</style>